<template>
    <div class="container" style="margin-top: 0;">
        <!-- 轮播图 pic 就是循环中的$item 本来是src="图片路径"-->
        <van-swipe v-if="LoginUser.cover.length>0" class="cover" :autoplay="2000"  :show-indicators="false" indicator-color="white">
            <van-swipe-item v-for="pic in LoginUser.cover">
                <van-image
                    width="100%"
                    height="10rem"
                    fit="fill"
                    position="center"
                    :src="pic"
                />
            </van-swipe-item>
        </van-swipe>

        <!-- 个人信息 -->
        <div class="myBox">
            <div class="L"><img :src="LoginUser.avatar"/></div>

                <div class="C">
                    <!-- 昵称 -->
                    <div class="tit">{{LoginUser.nickname}}</div>
                    <!-- 邮箱 -->
                    <div class="sub">{{LoginUser.email}}</div>
                </div>
        </div>
    </div>


    <!-- 基本资料 -->
    <div class="myboxcon">
        <router-link to="/user/base/profile">
            <p>基本资料</p>
            <img src="/assets/images/go.png">
        </router-link>
    </div>

    <!-- 邮箱 -->
    <div class="myboxcon" v-if="LoginUser.auth == '0'" @click="EmailCheck">
            <p>邮箱认证</p>
            <img src="/assets/images/go.png">
    </div>

    <!-- 收货地址 -->
    <div class="myboxcon">
        <!-- 路由地址 -->
        <router-link to="/user/address/index">
            <p>我的收货地址</p>
            <img src="/assets/images/go.png">
        </router-link>
    </div>

    <div class="myboxcon">
        <router-link to="/user/order/index">
            <p>我的订单</p>
            <img src="/assets/images/go.png">
        </router-link>
    </div>
    <!-- 消费记录 -->
    <div class="myboxcon">
        <router-link to="/user/base/record">
            <p>消费记录</p>
            <img src="/assets/images/go.png">
        </router-link>
    </div>
 
    
    <!-- 充值记录 -->
    <div class="myboxcon">
        <router-link to='/user/base/card'>
            <p>充值记录</p>
            <img src="/assets/images/go.png"> 
        </router-link>
    </div>
   

    <div class="myboxcon" @click="logout">
    <p>注销</p>
    <img src="/assets/images/go.png">
    </div>
    <!-- 使用 footer 底部 -->
    <menus></menus>

</template>

<script>
// 引入公共部分组件
    import menus from '@/components/common/menus.vue'
    
    export default {
        name:'BaseIndex',
        // 加载组件  menus 公共部分
        components:{
            menus
        },
        data() {
            return {
                LoginUser:this.$cookies.get('LoginUser')
            }
        },
        // 生命周期创建后
        created()
        {
            // 拿到用户信息
           var LoginUser = this.$cookies.get('LoginUser')

            //console.log(LoginUser);
        },

        methods: {
            // 邮箱认证方法
            EmailCheck()
            {
                // 通过this找到反馈组件
                this.$dialog.confirm({
                    title:'标题',
                    message:'是否确认发送邮件认证'

                }).then(async ()=>{
                    // 确认时(我要知道是谁发送的邮箱,点击拿到用户id，先异步去拿id,再同步await等待拿id 最后调接口) 先异步再同步

                    // 调用前台接口（调用的数据(就是把数据通过接口传到后台进行验证)用对象装{} 以对象的形式发送）
                    var success=await this.$api.email({userid:this.LoginUser.id});
                 
                    
                    // 判断反回来的数据
                    if(success.result)
                    {
                        this.$notify({
                            type:'success',
                            message:success.msg,
                            duration:1000,
                        })
                    }else
                    {
                        this.$notify({
                            type:'danger',
                            message:success.msg,
                            duration:1000,
                        })
                    }
                })
                .catch(()=>{})//取消没有提示
            },
            // 注销账号
            logout()
            {
                // 提醒
                this.$dialog.confirm({
                    tirle:"退出登录",
                    message:'是否确认退出登录',
                }).then(()=>{
                     this.$cookies.remove('LoginUser')
                // 跳转
                this.$router.push('/')
                }).cotch(()=>{})
               
            }
        }
    }
</script>
<style>
 
    .container{
        position: relative;
        padding-top: 0;
    }

    .myBox{
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        padding: 30px 0;
        background:transparent;
    }
    .myboxcon a{
        display: block;
        width: 100%;
    }
</style>